<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href='https://plus.google.com/104093787575230359634' rel='author'/>
<meta content='eX4aetTb1bRMfPFenBkl0DNG0nVF8c4j_EAsagbcrXE' name='google-site-verification'/>
<meta content='CED76A8C706DF43769EF018E0DAE616A' name='msvalidate.01'/>
<title>Tool JavaScript or HTML Beautify - BMA</title>
<meta content='Tool JavaScript or HTML Beautify | Blog Mas Andes' name='description'/>
<meta content='tool JavaScript Beautify, tool HTML Beautify, online JavaScript Beautify, online HTML Beautify' name='keywords'/>
<link rel="icon" href="web/favicon.png" type="image/png">
<link rel="stylesheet" href="web/third-party/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="font-awesome-4.0.3/css/font-awesome.min.css">	
<script src="web/third-party/codemirror/lib/codemirror.js"></script>
<script src="web/third-party/codemirror/mode/javascript/javascript.js"></script>
<script src="web/third-party/jquery/jquery.js"></script>
<script src="web/third-party/jquery/jquery.cookie.js"></script>
<script src="js/lib/beautify.js"></script>
<script src="js/lib/beautify-css.js"></script>
<script src="js/lib/beautify-html.js"></script>
<script src="js/test/sanitytest.js"></script>
<script src="js/test/beautify-tests.js"></script>
<script src="js/lib/unpackers/javascriptobfuscator_unpacker.js"></script>
<script src="js/lib/unpackers/urlencode_unpacker.js"></script>
<script src="js/lib/unpackers/p_a_c_k_e_r_unpacker.js"></script>
<script src="js/lib/unpackers/myobfuscate_unpacker.js"></script>
<style>
body{background:#1abc9c;color:#333}
img{border:0}
h1{position:relative}
h1 a{padding-left:10px;font-weight:700;text-decoration:none;color:#fff;}
p,select,label,.blurb,a.turn-off-codemirror{font:13px/1.231 arial, sans-serif;font-size:small}
a.turn-off-codemirror{margin-left:25px}
button.submit{width:100%;cursor:pointer;border:0;outline:0;background:#e74c3c;margin:10px 0;padding:10px 0}
button.submit:hover{background:#c0392b}
button.submit em{font-size:11px;font-style:normal;color:#fff}
label{cursor:pointer}
select{width:220px;}
table#options{float:right}
table#options td{vertical-align:top;padding-left:10px}
#header{float:left;height:80px;background:#2980b9;width:50%}
li{line-height:150%}
li.writeme{padding-top:8px}
#testresults{display:none;font-family:monaco, "lucida console", "courier new", monospace}
.CodeMirror{border:1px solid #16a085;height:350px;font-size:90%;background:#FFF}
p{margin-left:40px;margin-right:40px}
a{white-space:nowrap;color:#36d}
.contributor-sep{border-top:1px solid #ccc;padding-top:8px}
.button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;margin-left:5px;overflow:hidden;width:156px}
.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center}
.icon i{color:#fff;line-height:42px}
.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:118px;margin:0}
.slide p{font-family:Tahoma,Arial;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.facebook iframe{display:block;position:absolute;right:23px;top:10px;z-index:1}
.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}
.google #follow_0{width:70px!important;top:10px;right:45px;position:absolute;display:block;z-index:1}
.facebook .icon,.facebook .slide{background:#305c99}
.twitter .icon,.twitter .slide{background:#00cdff}
.google .icon,.google .slide{background:#d24228}
.facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:180px}
</style>
<script>
var the = {
use_codemirror: (!window.location.href.match(/without-codemirror/)),
beautify_in_progress: false,
editor: null // codemirror editor
};
function run_tests() {
var st = new SanityTest();
run_beautifier_tests(st, Urlencoded, js_beautify, html_beautify, css_beautify);
JavascriptObfuscator.run_tests(st);
P_A_C_K_E_R.run_tests(st);
Urlencoded.run_tests(st);
MyObfuscate.run_tests(st);
var results = st.results_raw().replace(/ /g, '&nbsp;').replace(/\r/g, '·').replace(/\n/g, '<br>');
$('#testresults').html(results).show();
}
function any(a, b) {
return a || b;
}
function read_settings_from_cookie() {
$('#tabsize').val(any($.cookie('tabsize'), '4'));
$('#brace-style').val(any($.cookie('brace-style'), 'collapse'));
$('#detect-packers').prop('checked', $.cookie('detect-packers') !== 'off');
$('#max-preserve-newlines').val(any($.cookie('max-preserve-newlines'), '5'));
$('#keep-array-indentation').prop('checked', $.cookie('keep-array-indentation') === 'on');
$('#break-chained-methods').prop('checked', $.cookie('break-chained-methods') === 'on');
$('#indent-scripts').val(any($.cookie('indent-scripts'), 'normal'));
$('#space-before-conditional').prop('checked', $.cookie('space-before-conditional') !== 'off');
$('#wrap-line-length').val(any($.cookie('wrap-line-length'), '0'));
$('#unescape-strings').prop('checked', $.cookie('unescape-strings') === 'on');
}
function store_settings_to_cookie() {
var opts = {
expires: 360
};
$.cookie('tabsize', $('#tabsize').val(), opts);
$.cookie('brace-style', $('#brace-style').val(), opts);
$.cookie('detect-packers', $('#detect-packers').prop('checked') ? 'on' : 'off', opts);
$.cookie('max-preserve-newlines', $('#max-preserve-newlines').val(), opts);
$.cookie('keep-array-indentation', $('#keep-array-indentation').prop('checked') ? 'on' : 'off', opts);
$.cookie('break-chained-methods', $('#break-chained-methods').prop('checked') ? 'on' : 'off', opts);
$.cookie('space-before-conditional', $('#space-before-conditional').prop('checked') ? 'on' : 'off',
opts);
$.cookie('unescape-strings', $('#unescape-strings').prop('checked') ? 'on' : 'off', opts);
$.cookie('wrap-line-length', $('#wrap-line-length').val(), opts);
$.cookie('indent-scripts', $('#indent-scripts').val(), opts);
}
function unpacker_filter(source) {
var trailing_comments = '',
comment = '',
unpacked = '',
found = false;
// cut trailing comments
do {
found = false;
if (/^\s*\/\*/.test(source)) {
found = true;
comment = source.substr(0, source.indexOf('*/') + 2);
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
} else if (/^\s*\/\//.test(source)) {
found = true;
comment = source.match(/^\s*\/\/.*/)[0];
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
}
} while (found);
var unpackers = [P_A_C_K_E_R, Urlencoded, /*JavascriptObfuscator,*/ MyObfuscate];
for (var i = 0; i < unpackers.length; i++) {
if (unpackers[i].detect(source)) {
unpacked = unpackers[i].unpack(source);
if (unpacked != source) {
source = unpacker_filter(unpacked);
}
}
}
return trailing_comments + source;
}
function beautify() {
if (the.beautify_in_progress) return;
store_settings_to_cookie();
the.beautify_in_progress = true;
var source = the.editor ? the.editor.getValue() : $('#source').val(),
output,
opts = {};
opts.indent_size = $('#tabsize').val();
opts.indent_char = opts.indent_size == 1 ? '\t' : ' ';
opts.max_preserve_newlines = $('#max-preserve-newlines').val();
opts.preserve_newlines = opts.max_preserve_newlines !== -1;
opts.keep_array_indentation = $('#keep-array-indentation').prop('checked');
opts.break_chained_methods = $('#break-chained-methods').prop('checked');
opts.indent_scripts = $('#indent-scripts').val();
opts.brace_style = $('#brace-style').val();
opts.space_before_conditional = $('#space-before-conditional').prop('checked');
opts.unescape_strings = $('#unescape-strings').prop('checked');
opts.wrap_line_length = $('#wrap-line-length').val();
opts.space_after_anon_function = true;
if (looks_like_html(source)) {
output = html_beautify(source, opts);
} else {
if ($('#detect-packers').prop('checked')) {
source = unpacker_filter(source);
}
output = js_beautify(source, opts);
}
if (the.editor) {
the.editor.setValue(output);
} else {
$('#source').val(output);
}
the.beautify_in_progress = false;
}
function looks_like_html(source) {
// <foo> - looks like html
// <!--\nalert('foo!');\n--> - doesn't look like html
var trimmed = source.replace(/^[ \t\n\r]+/, '');
var comment_mark = '<' + '!-' + '-';
return (trimmed && (trimmed.substring(0, 1) === '<' && trimmed.substring(0, 4) !== comment_mark));
}
</script>
</head>
<body>
<div id="header">
<h1>
<a href="index.html"><i class="fa fa-cog fa-spin"></i> Tool JavaScript or HTML Beautify - BMA</a>
</h1>
</div>
<table id="options">
<tr>
<td>
<select name="tabsize" id="tabsize">
<option value="1">Indent with a tab character</option>
<option value="2">Indent with 2 spaces</option>
<option value="3">Indent with 3 spaces</option>
<option value="4">Indent with 4 spaces</option>
<option value="8">Indent with 8 spaces</option>
</select>
<br>
<select name="max-preserve-newlines" id="max-preserve-newlines">
<option value="-1">Remove all extra newlines</option>
<option value="1">Allow 1 newline between tokens</option>
<option value="2">Allow 2 newlines between tokens</option>
<option value="5">Allow 5 newlines between tokens</option>
<option value="10">Allow 10 newlines between tokens</option>
<option value="0">Allow unlimited newlines between tokens</option>
</select>
<br>
<select name="wrap-line-length" id="wrap-line-length">
<option value="0">Do not wrap lines</option>
<option value="40">Wrap lines near 40 characters</option>
<option value="70">Wrap lines near 70 characters</option>
<option value="80">Wrap lines near 80 characters</option>
<option value="110">Wrap lines near 110 characters</option>
<option value="120">Wrap lines near 120 characters</option>
<option value="160">Wrap lines near 160 characters</option>
</select>
<br>
<select id="brace-style">
<option value="collapse">Braces with control statement</option>
<option value="expand">Braces on own line</option>
<option value="end-expand">End braces on own line</option>
</select>
<p style="margin:6px 0 0 0">HTML &lt;style&gt;, &lt;script&gt; formatting:</p>
<select id="indent-scripts">
<option value="keep">Keep indent level of the tag</option>
<option value="normal">Add one indent level</option>
<option value="separate">Separate indentation</option>
</select>
</td>
<td>
<input class="checkbox" type="checkbox" id="detect-packers">
<label for="detect-packers">Detect packers and obfuscators?</label>
<br>
<input class="checkbox" type="checkbox" id="keep-array-indentation">
<label for="keep-array-indentation">Keep array indentation?</label>
<br>
<input class="checkbox" type="checkbox" id="break-chained-methods">
<label for="break-chained-methods">Break lines on chained methods?</label>
<br>
<input class="checkbox" type="checkbox" id="space-before-conditional">
<label for="space-before-conditional">Space before conditional: "if(x)" / "if (x)"</label>
<br>
<input class="checkbox" type="checkbox" id="unescape-strings">
<label for="unescape-strings">Unescape printable chars encoded as \xNN or \uNNNN?</label>
</td>
</tr>
</table>
<div style="line-height: 0">
<button class="submit"><strong>Beautify JavaScript or HTML</strong>  <em>(ctrl-enter)</em>
</button>
<textarea id="source" rows="30" cols="160"></textarea>
<button class="submit"><strong>Beautify JavaScript or HTML</strong>  <em>(ctrl-enter)</em>
</button>
</div>
<div id="testresults"></div>
<script>
$(function () {
read_settings_from_cookie();
var default_text =
"// This is just a sample script. Paste your real code (javascript or HTML) here.\n\nif ('this_is'==/an_example/){of_beautifer();}else{var a=b?(c%d):e[f];}";
var textArea = $('#source')[0];
if (the.use_codemirror && typeof CodeMirror !== 'undefined') {
the.editor = CodeMirror.fromTextArea(textArea, {
theme: 'default',
lineNumbers: true
});
the.editor.focus();
the.editor.setValue(default_text);
$('.CodeMirror').click(function () {
if (the.editor.getValue() == default_text) {
the.editor.setValue('');
}
});
} else {
$('#source').val(default_text).bind('click focus', function () {
if ($(this).val() == default_text) {
$(this).val('');
}
}).bind('blur', function () {
if (!$(this).val()) {
$(this).val(default_text);
}
});
}
$(window).bind('keydown', function (e) {
if (e.ctrlKey && e.keyCode == 13) {
beautify();
}
})
$('.submit').click(beautify);
$('select').change(beautify);
});
</script>
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push([&#39;_setAccount&#39;, &#39;UA-29313206-1&#39;]);
_gaq.push([&#39;_trackPageview&#39;]);
(function() {
var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>